<template>
  <el-drawer v-model="showTop" :size="size" :direction="direction" :show-close="false" :destroy-on-close="true"
    :wrapperClosable="true" :with-header="showHeader" :close-on-click-modal="closeModal"
    style="height: 100%; width: 100%">
    <template #header>
      <div class="pop_header">
        <el-icon size="14" class="icon" @click="handleClose">
          <CloseBold />
        </el-icon>
      </div>
    </template>
    <slot></slot>
  </el-drawer>
</template>

<script>
import {
  defineComponent,
  ref,
  reactive,
  nextTick,
  onMounted,
  toRaw,
  toRefs,
  watch,
  handleError,
} from "vue";
export default defineComponent({
  props: {
    size: {
      type: String,
      default: () => "100%",
    },
    direction: {
      type: String,
      default: () => "ltr",
    },
    showHeader: {

    },
    closeModal: {
      type: Boolean,
      default: () => true,
    }
  },
  setup() {
    const showTop = ref(false);
    const handleClose = () => {
      showTop.value = false;
    };
    const open = () => {
      showTop.value = true;
    };
    const close = () => {
      showTop.value = false;
    };
    return {
      showTop,
      open,
      close,
      handleClose,
    };
  },
});
</script>
<style scoped lang="scss">
.pop_header {
  height: 44px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);

  .icon {
    height: 44px;
    width: 44px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }
}

.full-screen-drawer {
  height: 100vh;
}
</style>
